

// 放大镜
class Big {
    constructor(os, oxs, ol, oli, oleft, oright, olist, ozoom) {
        this.os = os;
        this.oxs = oxs;
        this.ol = ol;
        this.oli = oli;
        this.oleft = oleft;
        this.oright = oright;
        this.olist = olist;
        this.ozoom = ozoom;
        this.index = 0;
        this.end();
    }
    // li的颜色
    bgimg() {
        for (let i = 0; i < this.oli.length; i++) {
            if (this.index == i) {
                this.oli[this.index].style.border = "1px solid #f43499"
            } else {
                this.oli[i].style.border = "1px solid #f2f2f2"
            }
        }
        let id = location.search.split("=")[1];
        let num = parseInt(id) - 1;
        this.os.src = `imgs/goods/${num}/${this.index}.jpg`;
        this.ol.src = `imgs/goods/${num}/${this.index}.jpg`;
    }
    //s的背景图与li的序号对应
    sbj() {
        let that = this;
        for (let i = 0; i < this.oli.length; i++) {
            this.oli[i].onmousemove = function () {
                that.index = i;
                that.bgimg();
            }
        }
    }
    leftbtn() {
        if (this.olist.offsetLeft < 0) {
            this.olist.style.left = this.olist.offsetLeft + 355 + "px";
        }
    }
    rightbtn() {
        if (this.olist.offsetLeft >= 0 && this.olist.offsetLeft < Math.ceil(this.oli.length / 5) * 355) {
            this.olist.style.left = this.olist.offsetLeft - 355 + "px";
        }
    }
    right() {
        this.index++;
        if (this.index == this.oli.length) {
            this.index = 0;
        }
        this.bgimg();
        // this.oliimg();
        this.sbj()
    }
    over() {
        let that = this;
        this.ozoom.onmouseover = function () {
            that.os.style.display = "none";
            that.ol.parentNode.parentNode.parentNode.style.display = "block";
        }
    }
    out() {
        let that = this;
        this.ozoom.onmouseout = function () {
            that.os.style.display = "block";
            that.ol.parentNode.parentNode.parentNode.style.display = "none";
        }
    }
    move() {
        let that = this;
        this.ozoom.onmousemove = function (evt) {
            let e = evt || event;
            //限制小方块的边界位置,让鼠标在xs的中间
            let left = e.pageX - that.oxs.offsetWidth / 2 - 131 - 160;
            let top = e.pageY - that.oxs.offsetHeight / 2 - 172 - 160;
            if (left < 0) {
                left = 0;
            }
            if (top < 0) {
                top = 0
            }
            let maxleft = 420 - 160;
            if (left > maxleft) {
                left = maxleft;
            }
            let maxtop = 420 - 160;
            if (top > maxtop) {
                top = maxtop;
            }
            //小黄块的位置
            that.oxs.style.left = left + "px";
            that.oxs.style.top = top + "px"
            //大背景图的位置   //小黄块相对于s的位置与大背景图相对于盒子的位置一样，大小比例是l/s
            let x = left * 1100 / 420;
            let y = top * 1100 / 420;
            that.ol.style.left = -x + "px";
            that.ol.style.top = -y + "px";
        }
    }
    end() {
        this.bgimg()
        this.sbj();
        this.over();
        this.out();
        this.move();

        let that = this;
        this.oleft.onclick = function () {
            that.leftbtn();
        }
        this.oright.onclick = function () {
            that.rightbtn();
        }
    }
}

// http头部和列表页请求地址一致
console.log(location.search.split("=")[1]);
$(function () {
    getData();
})
function getData() {
    $.get('./php/getGoodsInfo.php', { goodsId: location.search.split("=")[1] }, function (data) {
        let arr = JSON.parse(data);
        console.log(arr)
        console.log(arr.goodsId)
        let str = "";
        str = `
        <div class="pic">
            <!-- 图片+图片list -->
            <div class="pic-box">
                <!-- 大图片 -->
                <div class="imgbox">
                    <div class="show clearfix">
                        <a href="#">
                            <div class="zoom">
                                <!-- 正常大小 -->
                                <img src="${arr.goodsImg}" id="normal">
                                <!-- 图片的小盒子 -->
                                <div class="maskbox"></div>
                                <!-- 放大 -->
                                <div class="bigbox">
                                    <div class="bigwrap">
                                        <div class="bigimg">
                                            <img src="${arr.goodsImg}" id="big">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- 图片列表 -->
                <div class="img-list">
                    <div class="list-wrap">
                        <ul class="img-cont">
                            <li class="img-li">
                                <img src="${arr.beiyong1}" alt="">
                            </li>
                            <li class="img-li">
                                <img src="${arr.beiyong2}" alt="">
                            </li>
                            <li class="img-li">
                                <img src="${arr.beiyong3}" alt="">
                            </li>
                            <li class="img-li">
                                <img src="${arr.beiyong4}" alt="">
                            </li>
                            <li class="img-li">
                                <img src="${arr.beiyong5}" alt="">
                            </li>
                            <li class="img-li">
                                <img src="${arr.beiyong6}" alt="">
                            </li>
                        </ul>
                    </div>
                    <span class="pic-btn iconfont icon-zuojiantou" id="img-pre-btn"></span>
                    <span class="pic-btn iconfont icon-youjiantou" id="img-next-btn"></span>
                </div>
            </div>
            <!-- 商品编码 -->
            <div class="pic-text">
                <p class="good-num" id="${arr.goodsId}">商品编码：${arr.goodsId}</p>
                <div class="collect">
                    <div class="g-c">
                        <i class="star-ico"></i>
                        <span>收藏商品</span>
                    </div>
                </div>
                <!-- 分享到 -->
                <div class="share-box">
                    <div class="share-tip">
                        <i class="share-ico"></i>
                        <span>分享到： </span>
                        <i class="down"></i>
                    </div>
                </div>
            </div>
            <!-- 保障信息 -->
            <div class="left-foot">
                <div class="promise-box clearfix">
                    <div>
                        <img src="./imgs/big/保证.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- tittle和价格板块 -->
        <div class="txt">
            <!-- 文字部分 -->
            <div class="right-inner">
                <div class="tittle-box">
                    <div class="pip-tittle">
                        <a href="#">${arr.goodsName}</a>
                        <span>唯品自营</span>
                        <p>${arr.goodsDesc}</p>
                    </div>
                </div>
                <!-- 价格部分 -->
                <div class="price-box">
                    <div class="wrap clearfix">
                        <img src="imgs/big/红色背景.png" alt="">
                        <div class="main-box">
                            <div class="info">
                                <div class="numbox">
                                    <i>¥</i>
                                    <!-- 价格 -->
                                    <span>${arr.goodsPrice}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- form -->
                <div class="atr-box clearfix">
                    <!-- 配送 -->
                    <div class="ps clearfix">
                        <div class="ad-txt">配送</div>
                        <div class="ad-box">
                            <div class="inner">
                                <p>请选择省市区</p>
                            </div>
                        </div>
                    </div>
                    <!-- 运费 -->
                    <div class="move clearfix">
                        <p class="move-money">运费</p>
                        <span>新会员专享首单满38元免邮（限唯品自营商品，部分商品不可用）</span>
                    </div>
                    <!-- 颜色 -->
                    <div class="color-box">
                        <div class="color clearfix">
                            <p>颜色</p>
                            <ul class="clearfix">
                                <li>
                                    <a href="#" class="color-item clearfix">
                                        <span class="l-img">
                                            <img src="${arr.goodsImg}" alt="">
                                        </span>
                                        <span class="c-name">黑色</span>
                                        <span class="ico"></span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 尺码 -->
                    <div class="size-box">
                        <div class="clearfix">
                            <p>尺码</p>
                            <ul class="clearfix">
                                <li>S</li>
                                <li>M</li>
                                <li>L</li>
                                <li>XL</li>
                            </ul>
                        </div>
                    </div>
                    <!-- 数量 -->
                    <div class="num-box clearfix">
                        <p>数量</p>
                        <div class="num clearfix">
                            <a href="#">-</a>
                            <em id="goods-num">1</em>
                            <a href="#">+</a>
                        </div>
                    </div>
                    <!-- 加购按钮 -->
                    <div class="buy-box">
                        <div class="i-box">
                            <div class="button-box">
                                <button class="clearfix" id="buy-btn">
                                    <div class="used">
                                        <span>¥799</span>
                                    </div>
                                    <!-- 现在价格 -->
                                    <div class="now" id="add-btn" goodsid="${arr.goodsId}">
                                        <span>¥${arr.goodsPrice}</span>
                                        <i>>抢</i>
                                    </div>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 对钩图片 -->
            <div class="other-box"></div>
        </div>`
        $('.goods').html(str)
        let onormal = document.querySelector("#normal");
        let omask = document.querySelector(".maskbox")
        let obig = document.querySelector("#big");
        let oimglist = document.querySelector(".img-cont");
        let oliimg = document.getElementsByClassName("img-li")
        let opre = document.querySelector("#img-pre-btn");
        let onext = document.querySelector("#img-next-btn");
        let ozoom = document.querySelector(".zoom");
        let bigger = new Big(onormal, omask, obig, oliimg, opre, onext, oimglist, ozoom)

        let adbtn = document.querySelector("#add-btn");
        adbtn.onclick = function () {
            console.log(this.getAttribute('goodsId'));
            let id = this.getAttribute('goodsId');
            $.post(
                "./php/addShoppingCart.php",
                {
                    "goodsCount": 1,
                    "vipName": getCookie("vipName"),
                    "goodsId": location.search.split("=")[1]
                },
                function (data) {
                    window.open('http://127.0.0.1/test/VIP/shoppingcar.html?vipName=' + getCookie("vipName"));
                }
            );
        }
    }
    );
}




